<template style="overflow-y: scroll; overflow-x: hidden; height: 100%">
  <el-drawer
    :title="this.label + '指令'"
    size="37%"
    :visible.sync="dialog"
    custom-class="demo-drawer"
    @close="manufactureDrawer"
  >
    <div class="demo-drawer__content">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-position="right"
        label-width="120px"
      >
        <el-form-item label="产品项目" prop="ProducValue">
          <el-cascader
            ref="cascader"
            v-model="ruleForm.ProducValue"
            :options="ProductList"
            @change="change"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="生产工艺" prop="documentName">
          <el-input disabled v-model="ruleForm.documentName"></el-input>
        </el-form-item>
<!--        <el-form-item label="记录表格">-->
<!--          <el-input v-model="ruleForm.dataTemplateName"></el-input>-->
<!--        </el-form-item>-->
        <el-row>
          <el-col>
            <el-form-item label="批号" prop="batchNumber">
              <el-input
                size="small"
                v-model="ruleForm.batchNumber"
                :disabled="!ruleForm.documentName"
                @input="inputChange"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="下发次序">
              <el-input size="small" disabled v-model="ruleForm.orderNumber" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" prop="contentData">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
            v-model="ruleForm.contentData"
          ></el-input>
        </el-form-item>
        <el-form-item label="生产员" prop="receiveUserName">
          <el-tag v-if="this.ruleForm.receiveUserName">{{
            this.ruleForm.receiveUserName
          }}</el-tag>
          <span
            class="el-icon-circle-plus-outline button-icon"
            @click="getPersonnel"
          ></span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取消</el-button>
        <el-button type="primary" @click="handleClose">保存</el-button>
      </span>
    </div>
    <SelectPersonnel
      :SelectPersonnelData="SelectPersonnelData"
      v-on:receiveUserData="receiveUserData"
    ></SelectPersonnel>
  </el-drawer>
</template>

<script>
import { listDictTreeItem } from '@/api/base/dict.js'
import { getByDictCode } from '@/api/rs/technique.js'
import { getRecordTemplateByDictCode } from '@/api/rs/manufactureRecordTemplate.js'
import { getNextSequence, pushSave, pushUpdate } from '@/api/rs/manufacture.js'
import SelectPersonnel from '@/components/SelectPersonnel/index.vue'
export default {
  props: ['dialogVisible', 'modificationData'],
  components: { SelectPersonnel },
  data() {
    return {
      label: '',
      type: '',
      dialog: false,
      loading: false,
      ruleForm: {
        ProducValue: '',
        documentName: '',
        batchNumber: '',
        orderNumber: '',
        contentData: '',
        receiveUserName: '',
        productDictCode:'',
        subProductDictCode:'',
        dataTemplateName: '',//模板名称
      },
      rules: {
        ProducValue: [
          { required: true, message: '请选择产品项目', trigger: 'blur' }
        ],
        documentName: [
          { required: true, message: '生产工艺不可为空', trigger: 'blur' }
        ],
        batchNumber: [
          { required: true, message: '批号不可为空', trigger: 'blur' }
        ],

        contentData: [
          { required: true, message: '备注不可为空', trigger: 'blur' }
        ],
        receiveUserName: [
          { required: true, message: '生产员不可为空', trigger: 'blur' }
        ]
      },
      ProductList: [],
      SelectPersonnelData: {},
      receiveUserId: '',
      techniqueId: '',
      manufactureApplyId: ''
    }
  },
  watch: {
    dialogVisible(val) {
      this.dialog = val.dialogVisible
      this.label = val.label
      this.type = val.type
      if (val.type == 2) {
        let data = this.modificationData
        console.log(this.modificationData)
        this.ruleForm.batchNumber = data.batchCode
        this.ruleForm.contentData = data.memo
        this.productDictCode = data.productDictCode
        this.receiveUserId = data.receiveUserId
        this.ruleForm.orderNumber = data.sequence
        this.ruleForm.ProducValue = data.subProductDictCode
        this.subProductDictCode = data.subProductDictCode
        this.ruleForm.documentName = data.techDocumentName
        this.ruleForm.receiveUserName = data.receiveUserName
        this.techniqueId = data.techniqueId
        this.manufactureApplyId = data.manufactureApplyId
      }
    }
  },
  mounted() {
    this.dialogVisible
    this.listDictTreeItem()
  },
  methods: {
    /**
     * 抽屉关闭时触发
     */
    manufactureDrawer(){
      this.ruleForm = {
        ProducValue: '',
        documentName: '',
        batchNumber: '',
        orderNumber: '',
        contentData: '',
        receiveUserName: '',
        productDictCode:'',
        subProductDictCode:'',
        dataTemplateName: '',//模板名称
      }
    },
    handleCancel() {
      this.dialog = false
    },
    // 获取产品子项
    async listDictTreeItem() {
      let data = await listDictTreeItem({
        dictGroupCode: 'product',
        parentDictId: 0
      })
      this.ProductList = data.data
    },
    //获取选中项目
    change(val) {
      let nodesObj = this.$refs['cascader'].getCheckedNodes()
      this.ruleForm.productDictCode = nodesObj[0].path[0]
      this.ruleForm.subProductDictCode = nodesObj[0].path[1]
      this.ruleForm.documentName = ""
      this.techniqueId = ""
      let requestData = {
        productDictCode: this.ruleForm.productDictCode,
        subProductDictCode: this.ruleForm.subProductDictCode
      }
      //获取生产工艺
      getByDictCode(requestData).then((res) => {
        console.log(res, 'resiii')
        this.ruleForm.documentName = res.data.documentName
        this.techniqueId = res.data.techniqueId
      })
    },
    // imput改变的时候
    async inputChange(val) {
      if (val != '') {
        let pushdata = {
          batchCode: val,
          productDictCode: this.ruleForm.productDictCode,
          subProductDictCode: this.ruleForm.subProductDictCode
        }
        let data = await getNextSequence(pushdata)
        this.ruleForm.orderNumber = data.data
      }
    },
    //获取人员
    getPersonnel() {
      this.SelectPersonnelData = {
        dialogReview: true
      }
    },
    receiveUserData(data) {
      console.log(data)
      this.receiveUserId = data.receiveUserId
      this.ruleForm.receiveUserName = data.receiveUserName
    },
    // 保存
    handleClose() {
      let data = {
        batchCode: this.ruleForm.batchNumber,
        dataRecordId: this.ruleForm.dataRecordId,
        memo: this.ruleForm.contentData,
        productDictCode: this.ruleForm.productDictCode,
        receiveUserId: this.receiveUserId,
        sequence: this.ruleForm.orderNumber,
        subProductDictCode: this.ruleForm.subProductDictCode,
        techniqueId: this.techniqueId
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 向后台发送请求
          if (this.type == 1) {
            this.dialog = false
            pushSave(data).then((res) => {
              if (res.code == 1) {
                this.$emit('promptMessage', res.code)
                this.$message.success("添加成功")
                this.ruleForm.batchNumber = ''
                this.ruleForm.ProducValue = ''
                this.ruleForm.contentData = ''
                this.ruleForm.productDictCode = ''
                this.receiveUserId = ''
                this.ruleForm.orderNumber = ''
                this.ruleForm.subProductDictCode = ''
                this.techniqueId = ''
                this.ruleForm.receiveUserName = ''
              }
            })
          } else if (this.type == 2) {
            data.manufactureApplyId = this.manufactureApplyId
            this.dialog = false
            pushUpdate(data).then((res) => {
              if (res.code == 1) {
                this.$emit('promptMessage', res.code)
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.ruleForm.batchNumber = ''
                this.ruleForm.ProducValue = ''
                this.ruleForm.contentData = ''
                this.ruleForm.productDictCode = ''
                this.receiveUserId = ''
                this.ruleForm.orderNumber = ''
                this.ruleForm.subProductDictCode = ''
                this.techniqueId = ''
                this.ruleForm.receiveUserName = ''
              }
            })
          }
        } else {
          //就像用户提示发生错误的消息
          this.$message.error('请输入内容')
        }
      })
    }
  }
}
</script>

<style lang="scss">
.dialog-footer {
  margin-right: 0;
  text-align: right;
  margin-left: 70%;
}
</style>
